<template>
	<div class="app-container">


		<!-- 查询参数 -->
		<el-tabs type="border-card" @tab-click="tabcli">

			<el-tab-pane label="产生量统计">
				<div class="search-wrapper">
					<el-form class="search-param" ref="parm" :model="parm" label-width="100px" size="mini">
						<el-form-item style="margin-left: -60px;">
							<el-button type="primary" size="mini" class="el-icon-date" @click="pageByParam">年
							</el-button>
							<el-button type="primary" size="mini" class="el-icon-date" @click="pageByParam">月
							</el-button>
							<el-button type="primary" size="mini" class="el-icon-date" @click="pageByParam">日
							</el-button>
							<el-button type="success" size="mini" class="el-icon-exp" @click="exp">导出数据</el-button>
						</el-form-item>
					</el-form>
				</div>
				<el-row>
					<el-col :span="12">
						<div class="chart-wrapper">
							<LineChart v-if="showtab" showtype="区域" dw="吨" ref="va" :colorindex="0" :height="cheight/2-120+'px'" />
						</div>
					</el-col>
					<el-col :span="12">
						<div class="chart-wrapper">
							<LineChart v-if="showtab" showtype="车辆" dw="吨" ref="vas" :colorindex="3" :height="cheight/2-120+'px'" />
						</div>
			 	</el-col>
					<el-col :span="12">
						<div class="chart-wrapper">
							<LineChart v-if="showtab" showtype="产生单位" dw="吨" ref="aa" :colorindex="1" :height="cheight/2-120+'px'" />
						</div>
					</el-col>
					<el-col :span="12">
						<div class="chart-wrapper">
							<LineChart v-if="showtab" showtype="收运单位" dw="吨" ref="wa" :colorindex="2" :height="cheight/2-120+'px'" />
						</div>
					</el-col>
				</el-row>
			</el-tab-pane>
			<el-tab-pane label="报警统计">
		 	<el-row>
					<el-col :span="24">
						<div class="chart-wrapper">
							<LineChart  v-if="showtab" showtype="车辆超速统计" dw="数量" ref="su" :colorindex="4"
								:height="cheight/2-120+'px'" />
						</div>
					</el-col>
					<el-col :span="24">
						<vxe-table show-overflow :column-config="{resizable: true}" :height="cheight/2-120+'px'" :pageParam="loading"
							:data="tableDatas.list" size="mini" border stripe>
							<vxe-column type="seq" title="序号" width="60"></vxe-column>
							<vxe-column field="t1" title="车牌号"></vxe-column>
							<vxe-column field="t2" title="本次超速速度"></vxe-column>
							<vxe-column field="t3" title="超速时间"></vxe-column>
							<vxe-column field="t4" title="超速次数"></vxe-column>
						</vxe-table>
						<vxe-pager background size="small" stripe :current-page="parm.pageNo"
							:page-size="parm.pageSize" :total="tableDatas.totalRow"
							:page-sizes="[10, 20, 100, {label: '大量数据', value: 1000}, {label: '全量数据', value: -1}]"
							:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
							@size-change="handleSizeChange" background class="page-wrapper"
							@current-change="handleCurrentChange">
						</vxe-pager>
					</el-col>
				</el-row>
			</el-tab-pane>
		</el-tabs>

		<batlist ref="batlist" @selebatno="selebatno" />
	</div>
</template>

<script>
	import LineChart from './dashboard/LineChart'
	import LineCharts from './dashboard/LineCharts'
	import batlist from '../capacity/bat_list.vue'
	import datajson from '@/views/util/data.json'
	import {
		getBatDetail,
		exportBatRealTimeData
	} from './index.js'
	export default {
		components: {
			LineChart,
			LineCharts,
			batlist
		},
		data() {
			var year = new Date().getFullYear();
			var month = new Date().getMonth() + 1;
			var day = new Date().getDate();
			month = month < 10 ? '0' + month : month;
			day = day < 10 ? '0' + day : day;
			var nday = year + "-" + month + "-" + day;
			return {
				loading: true,
				// 日期范围
				dateRange: [nday + ' 00:00:00', nday + ' 23:59:59'],
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now() - 8.64e6
					}
				},
				cheight: document.documentElement.clientHeight,
				parm: {
					"batNo": "Z0000110",
					"beginTime": "",
					"endTime": "",
					"pageIndex": 1,
					"pageSize": 10,
					"typeList": []
				},
				tableDatas: {
					totalRow: 0,
					list: []
				},
				showtab:true
			}
		},
		created() {
			// this.getBatDetail();
			this.showtest();

		},
		methods: {
			tabcli(){
				console.log(this.showtab);
				this.showtab = false;
				setTimeout(()=>{
					this.showtab = true;
				},50)
			},
			openbat() {
				this.$refs.batlist.open();
			},
			//选择
			selebatno(e) {
				console.log(e);
				this.parm.batNo = e.batNo;
				setTimeout(() => {
					this.getBatDetail();
				}, 500)
			},
			pageByParam() {
				this.getBatDetail();
			},
			//导出数据
			async exp() {
				this.parm.beginTime = this.dateRange[0];
				this.parm.endTime = this.dateRange[1];
				const res = await exportBatRealTimeData(this.parm);
				if (res.code == 1) {
					console.log(res);
					let hrefs = this.$store.state.settings.ip + res.obj;
					console.log(hrefs);
					window.location.href = hrefs;
				}
			},
			//测试数据
			showtest() {
				this.tableDatas.totalRow = datajson.csdlist.length;
				this.tableDatas.list = datajson.csdlist;
				var w = [34, 45, 3, 2, 3, 24, 5, 5, 3, 33, 3];
				var a = [34, 45, 3, 2, 3, 24, 5, 5, 3, 33, 3];
				var v = [34, 45, 3, 2, 3, 24, 5, 5, 3, 33, 3];
				var x = ["2022-01-01", "2022-02-01", "2022-03-01", "2022-04-01", "2022-05-01", "2022-06-01", "2022-07-01",
					"2022-08-01", "2022-09-01", "2022-10-01", "2022-11-01"
				];
				this.$refs.wa.setnums(w, x, true);
				this.$refs.vas.setnums(w, x, true);
				this.$refs.aa.setnums(a, x, true);
				this.$refs.va.setnums(v, x, true);
			},
			//获取经纬度
			async getBatDetail() {
				// this.parm.beginTime = this.dateRange[0];
				// this.parm.endTime = this.dateRange[1];
				// let res = await getBatDetail(this.parm);
				// console.log(res);
				// if (res.code == 1) {
				// 	let x = [];
				// 	let a = [];
				// 	let v = [];
				// 	let w = [];
				// 	res.obj.forEach(item => {
				// 		x.push(item.sendTime);
				// 		a.push(item.batCur == null ? 0 : item.batCur);
				// 		v.push(item.batV == null ? 0 : item.batV);
				// 		w.push(item.temp == null ? 0 : parseInt(item.temp));
				// 	})
				// 	console.log(w);
				// 	w = [34, 45, 3, 2, 3, 24, 5, 5, 3, 33, 3];
				// 	a = [34, 45, 3, 2, 3, 24, 5, 5, 3, 33, 3];
				// 	v = [34, 45, 3, 2, 3, 24, 5, 5, 3, 33, 3];
				// 	w = ["2022-01-01", "2022-02-01", "2022-03-01", "2022-04-01", "2022-05-01", "2022-06-01", "2022-07-01", "2022-08-01", "2022-09-01", "2022-10-01","2022-11-01"];
				// 	this.$refs.wa.setnums(w, x, true);
				// 	this.$refs.wa.setnums(w, x, true);
				// 	this.$refs.aa.setnums(a, x, true);
				// 	this.$refs.va.setnums(v, x, true);
				// }

			}

		}
	}
</script>

<style>
	.vxe-input--panel.type--date,
	.vxe-input--panel.type--month,
	.vxe-input--panel.type--week,
	.vxe-input--panel.type--year {
		z-index: 9998 !important
	}

	.vxe-select--panel {
		z-index: 9997 !important
	}
</style>
